(function () {
    //顶点着色器
    let VSHADER_SOURCE = `
        attribute vec4 a_Position;

        void main(){
            gl_Position=a_Position;
            gl_PointSize=10.;

        }
    `;
    //片元着色器
    let FSHADER_SOURCE = `
        void main(){
            gl_FragColor=vec4(1.,1.,0.,1.);
        }
    `
    function main() {
        let canvas = document.getElementById('webgl-canvas');

        //获取webgl上下文
        let gl = getWebGLContext(canvas);
        if (!gl) return;

        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.log('Failed to initial shaders')
            return
        }

        //获取attribute 变量的存储位置
        var a_Position = gl.getAttribLocation(gl.program, 'a_Position')

        //注册点击事件绘制点
        canvas.onmousedown = function (ev) {
            click(ev, gl, canvas, a_Position)
        }

        if (a_Position < 0) {
            console.log('Failed to get the storage localtion of a_Position');
            return
        }


        var g_points = [];
        //点击事件方法
        function click(ev, gl, canvas, a_Position) {
            var x = ev.clientX,
                y = ev.clientY,
                rect = ev.target.getBoundingClientRect();

            x = ((x - rect.left) - canvas.height / 2) / (canvas.height / 2),
                y = (canvas.width / 2 - (y - rect.top)) / (canvas.width / 2);
            g_points.push(x);
            g_points.push(y);


            //清除<canvas>的颜色
            gl.clear(gl.COLOR_BUFFER_BIT);

            var len = g_points.length;
            for (var i = 0; i < len; i++) {
                //将顶点位置传输给attribute变量
                gl.vertexAttrib3f(a_Position, g_points[i], g_points[i + 1], 0.)
                // gl.clearColor(0,0,0,1);
                //绘制一个点

                gl.drawArrays(gl.POINTS, 0, 1)

            }
        }




    }
    main();


})();